{% from 'macros.html' import block_field %}
<form
  id="{{ form_type }}-form"
  class="form-horizontal form-label-left add-id"
  method="post"
  autocomplete="off"
>
  {% set panel_id = range(10000) | random %} {{ form.id(id=form_type + '-id',
  class="add-id") }} {{ form.hidden_tag() }}
  <input type="hidden" id="copy" name="copy" class="add-id" />
  <div style="padding: 40px;">
    <div id="{{ form_type }}-wizard" class="form_wizard wizard_horizontal add-id">
      <ul class="wizard_steps">
        <li>
          <a href="#step-1">
            <span class="step_no">1</span>
            <span class="step_descr"
              >Step 1<br />
              <small>General</small>
            </span>
          </a>
        </li>
        <li>
          <a href="#step-2">
            <span class="step_no">2</span>
            <span class="step_descr"
              >Step 2<br />
              <small>Specific</small>
            </span>
          </a>
        </li>
        <li>
          <a href="#step-3">
            <span class="step_no">3</span>
            <span class="step_descr"
              >Step 3<br />
              <small>Targets</small>
            </span>
          </a>
        </li>
        <li>
          <a href="#step-4">
            <span class="step_no">4</span>
            <span class="step_descr"
              >Step 4<br />
              <small>Result</small>
            </span>
          </a>
        </li>
      </ul>
      <div id="step-1">
        <div
          class="accordion"
          id="accordion-step1"
          role="tablist"
          aria-multiselectable="true"
        >
          <div class="panel" style="border-color: #000; position: relative;">
            <a
              class="doc-link"
              style="position: absolute; top: 10px; right: 10px;"
              href="automation/services/#main-parameters"
              target="_blank"
              ><i
                class="glyphicon glyphicon-info-sign fa-2x"
                style="cursor: pointer;"
              ></i
            ></a>
            <a
              class="panel-heading collapsed"
              role="tab"
              id="heading-step1"
              data-toggle="collapse"
              href="#collapse-step1-{{ panel_id }}"
            >
              <h4 class="panel-title" style="color: #000;">Main Parameters</h4>
            </a>
            <div
              id="collapse-step1-{{ panel_id }}"
              class="panel-collapse collapse in"
              role="tabpanel"
            >
              <div class="panel-body" style="background-color: #fafafa;">
                {% for field_name in form.group_properties["step1-1"] %} {{
                block_field(form, field_name) }} {% endfor %}
              </div>
            </div>
          </div>
          <div class="panel" style="border-color: #000; position: relative;">
            <a
              class="doc-link"
              style="position: absolute; top: 10px; right: 10px;"
              href="automation/services/#parameterized-form"
              target="_blank"
              ><i
                class="glyphicon glyphicon-info-sign fa-2x"
                style="cursor: pointer;"
              ></i
            ></a>
            <a
              class="panel-heading collapsed"
              role="tab"
              id="heading-step1-2"
              data-toggle="collapse"
              href="#collapse-step1-2-{{ panel_id }}"
            >
              <h4 class="panel-title" style="color: #000;">
                Parameterized Form
              </h4>
            </a>
            <div
              id="collapse-step1-2-{{ panel_id }}"
              class="panel-collapse collapse in"
              role="tabpanel"
            >
              <div class="panel-body" style="background-color: #fafafa;">
                {% for field_name in form.group_properties["step1-2"] %} {{
                block_field(form, field_name) }} {% endfor %}
              </div>
            </div>
          </div>
          <div class="panel" style="border-color: #000; position: relative;">
            <a
              class="doc-link"
              style="position: absolute; top: 10px; right: 10px;"
              href="automation/services/#workflow-parameters"
              target="_blank"
              ><i
                class="glyphicon glyphicon-info-sign fa-2x"
                style="cursor: pointer;"
              ></i
            ></a>
            <a
              class="panel-heading collapsed"
              role="tab"
              id="heading-step1-3"
              data-toggle="collapse"
              href="#collapse-step1-3-{{ panel_id }}"
            >
              <h4 class="panel-title" style="color: #000;">
                Workflow Parameters
              </h4>
            </a>
            <div
              id="collapse-step1-3-{{ panel_id }}"
              class="panel-collapse collapse in"
              role="tabpanel"
            >
              <div class="panel-body" style="background-color: #fafafa;">
                {% for field_name in form.group_properties["step1-3"] %} {{
                block_field(form, field_name) }} {% endfor %}
              </div>
            </div>
          </div>
          {% if form.custom_properties %}
          <div class="panel" style="border-color: #000; position: relative;">
            <a
              class="doc-link"
              style="position: absolute; top: 10px; right: 10px;"
              href="automation/services/#workflow-parameters"
              target="_blank"
              ><i
                class="glyphicon glyphicon-info-sign fa-2x"
                style="cursor: pointer;"
              ></i
            ></a>
            <a
              class="panel-heading collapsed"
              role="tab"
              id="heading-step1-3"
              data-toggle="collapse"
              href="#collapse-step1-3-{{ panel_id }}"
            >
              <h4 class="panel-title" style="color: #000;">
                Custom Properties
              </h4>
            </a>
            <div
              id="collapse-step1-3-{{ panel_id }}"
              class="panel-collapse collapse in"
              role="tabpanel"
            >
              <div class="panel-body" style="background-color: #fafafa;">
                {% for property, values in form.custom_properties.items() %} {% set
                label %} {% if "help" in values %}
                <label for="{{ property }}" help="{{ values['help'] }}">
                  {{ values["pretty_name"] }}
                </label>
                {% else %}
                <label for="{{ property }}">{{ values["pretty_name"] }}</label>
                {% endif %} {% endset %} {% if values["type"] == "bool" %}
                <fieldset>
                  <div class="item">
                    {{ form[property](id="{}-{}".format(form_type, property),
                    class="add-id", checked=form[property].default) }} {{ label }}
                  </div>
                </fieldset>
                {% else %} {{ label }}
                <div class="form-group">
                  {{ form[property](id="{}-{}".format(form_type, property),
                  class="form-control add-id") }}
                </div>
                {% endif %} {% endfor %}
              </div>
            </div>
          </div>
          {% endif %}
          <div class="add-id" id="rbac-properties">
            <div class="panel" style="border-color: #000; position: relative;">
              <a
                class="doc-link"
                style="position: absolute; top: 10px; right: 10px;"
                href="automation/services/#workflow-parameters"
                target="_blank"
                ><i
                  class="glyphicon glyphicon-info-sign fa-2x"
                  style="cursor: pointer;"
                ></i
              ></a>
              <a
                class="panel-heading collapsed"
                role="tab"
                id="heading-step1-4"
                data-toggle="collapse"
                href="#collapse-step1-4-{{ panel_id }}"
              >
                <h4 class="panel-title" style="color: #000;">
                  Access Controls
                </h4>
              </a>
              <div
                id="collapse-step1-4-{{ panel_id }}"
                class="panel-collapse collapse in"
                role="tabpanel"
              >
                <div class="panel-body" style="background-color: #fafafa;">
                  {{ block_field(form, "owners") }} {% for property in
                  form.rbac_properties %} {{ block_field(form, property) }} {% endfor %}
                  {{ block_field(form, "restrict_to_owners") }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="step-2">
        {% set groups = form.groups or {"Parameters": {"commands": form.service_fields,
        "default": "expanded"}} %}
        <div
          class="accordion"
          id="accordion"
          role="tablist"
          aria-multiselectable="true"
        >
          {% for group_name, group in groups.items() %} {% set group_id = range(10000) |
          random %} {% set position = "in" if group.default == "expanded" else "" %}
          <div class="panel" style="border-color: #000; position: relative;">
            <a
              class="doc-link"
              style="position: absolute; top: 10px; right: 10px;"
              href="automation/services/#section-specific"
              target="_blank"
              ><i
                class="glyphicon glyphicon-info-sign fa-2x"
                style="cursor: pointer;"
              ></i
            ></a>
            <a
              class="panel-heading collapsed"
              role="tab"
              id="heading-{{ group_id }}"
              data-toggle="collapse"
              href="#collapse-{{ group_id }}"
              aria-expanded="false"
              aria-controls="collapse-{{ group_id }}"
            >
              <h4 class="panel-title" style="color: #000;">{{ group_name }}</h4>
            </a>
            <div
              id="collapse-{{ group_id }}"
              class="panel-collapse collapse {{ position }}"
              role="tabpanel"
            >
              <div class="panel-body" style="background-color: #fafafa;">
                {% for field_name in group.commands %} {% if field_name != "run_method"
                %} {{ block_field(form, field_name) }} {% endif %} {% endfor %}
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
      <div id="step-3">
        <div
          class="accordion"
          id="accordion-step3"
          role="tablist"
          aria-multiselectable="true"
        >
          <div class="panel" style="border-color: #000; position: relative;">
            <a
              class="doc-link"
              style="position: absolute; top: 10px; right: 10px;"
              href="automation/services/#devices"
              target="_blank"
              ><i
                class="glyphicon glyphicon-info-sign fa-2x"
                style="cursor: pointer;"
              ></i
            ></a>
            <a
              class="panel-heading collapsed"
              role="tab"
              id="heading-step3"
              data-toggle="collapse"
              href="#collapse-step3-{{ panel_id }}"
            >
              <h4 class="panel-title" style="color: #000;">Devices</h4>
            </a>
            <div
              id="collapse-step3-{{ panel_id }}"
              class="panel-collapse collapse in"
              role="tabpanel"
            >
              <div class="panel-body" style="background-color: #fafafa;">
                {% for field_name in form.group_properties["step3-1"] %} {{
                block_field(form, field_name) }} {% endfor %}
              </div>
            </div>
          </div>
          <div class="panel" style="border-color: #000; position: relative;">
            <a
              class="doc-link"
              style="position: absolute; top: 10px; right: 10px;"
              href="automation/services/#iteration"
              target="_blank"
              ><i
                class="glyphicon glyphicon-info-sign fa-2x"
                style="cursor: pointer;"
              ></i
            ></a>
            <a
              class="panel-heading collapsed"
              role="tab"
              id="heading-step3-2"
              data-toggle="collapse"
              href="#collapse-step3-2-{{ panel_id }}"
            >
              <h4 class="panel-title" style="color: #000;">
                Iteration
              </h4>
            </a>
            <div
              id="collapse-step3-2-{{ panel_id }}"
              class="panel-collapse collapse in"
              role="tabpanel"
            >
              <div class="panel-body" style="background-color: #fafafa;">
                {% for field_name in form.group_properties["step3-2"] %} {{
                block_field(form, field_name) }} {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="step-4">
        <div
          class="accordion"
          id="accordion-step4"
          role="tablist"
          aria-multiselectable="true"
        >
          <div class="panel" style="border-color: #000; position: relative;">
            <a
              class="doc-link"
              style="position: absolute; top: 10px; right: 10px;"
              href="automation/services/#conversion-and-postprocessing"
              target="_blank"
              ><i
                class="glyphicon glyphicon-info-sign fa-2x"
                style="cursor: pointer;"
              ></i
            ></a>
            <a
              class="panel-heading collapsed"
              role="tab"
              id="heading-step4"
              data-toggle="collapse"
              href="#collapse-step4-{{ panel_id }}"
            >
              <h4 class="panel-title" style="color: #000;">
                Conversion and Postprocessing
              </h4>
            </a>
            <div
              id="collapse-step4-{{ panel_id }}"
              class="panel-collapse collapse in"
              role="tabpanel"
            >
              <div class="panel-body" style="background-color: #fafafa;">
                {% for field_name in form.group_properties["step4-1"] %} {{
                block_field(form, field_name) }} {% endfor %}
              </div>
            </div>
          </div>
          <div class="panel" style="border-color: #000; position: relative;">
            <a
              class="doc-link"
              style="position: absolute; top: 10px; right: 10px;"
              href="automation/services/#validation"
              target="_blank"
              ><i
                class="glyphicon glyphicon-info-sign fa-2x"
                style="cursor: pointer;"
              ></i
            ></a>
            <a
              class="panel-heading collapsed"
              role="tab"
              id="heading-step4-2"
              data-toggle="collapse"
              href="#collapse-step4-2-{{ panel_id }}"
            >
              <h4 class="panel-title" style="color: #000;">
                Validation
              </h4>
            </a>
            <div
              id="collapse-step4-2-{{ panel_id }}"
              class="panel-collapse collapse in"
              role="tabpanel"
            >
              <div class="panel-body" style="background-color: #fafafa;">
                {% for field_name in form.group_properties["step4-2"] %} {{
                block_field(form, field_name) }} {% endfor %}
              </div>
            </div>
          </div>
          <div class="panel" style="border-color: #000; position: relative;">
            <a
              class="doc-link"
              style="position: absolute; top: 10px; right: 10px;"
              href="automation/services/#report"
              target="_blank"
              ><i
                class="glyphicon glyphicon-info-sign fa-2x"
                style="cursor: pointer;"
              ></i
            ></a>
            <a
              class="panel-heading collapsed"
              role="tab"
              id="heading-step4-3"
              data-toggle="collapse"
              href="#collapse-step4-3-{{ panel_id }}"
            >
              <h4 class="panel-title" style="color: #000;">
                Report
              </h4>
            </a>
            <div
              id="collapse-step4-3-{{ panel_id }}"
              class="panel-collapse collapse in"
              role="tabpanel"
            >
              <div class="panel-body" style="background-color: #fafafa;">
                {% for field_name in form.group_properties["step4-3"] %} {{
                block_field(form, field_name) }} {% endfor %}
              </div>
            </div>
          </div>
          <div class="panel" style="border-color: #000; position: relative;">
            <a
              class="doc-link"
              style="position: absolute; top: 10px; right: 10px;"
              href="automation/services/#notifications"
              target="_blank"
              ><i
                class="glyphicon glyphicon-info-sign fa-2x"
                style="cursor: pointer;"
              ></i
            ></a>
            <a
              class="panel-heading collapsed"
              role="tab"
              id="heading-step4-4"
              data-toggle="collapse"
              href="#collapse-step4-4-{{ panel_id }}"
            >
              <h4 class="panel-title" style="color: #000;">
                Notification
              </h4>
            </a>
            <div
              id="collapse-step4-4-{{ panel_id }}"
              class="panel-collapse collapse in"
              role="tabpanel"
            >
              <div class="panel-body" style="background-color: #fafafa;">
                {% for field_name in form.group_properties["step4-4"] %} {{
                block_field(form, field_name) }} {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
